<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>yexue</title>
    <script type="text/javascript" src="../static/js/jquery-2.1.4.min.js"
            th:src="@{/js/jquery-2.1.4.min.js}"></script>
    <script type="text/javascript" src="../static/js/jquery.form.min.js"
            th:src="@{/js/jquery.form.min.js}"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none
        }

        .left {
            max-width: 50%;
            width: 50%;
            min-width: 460px;
            background-color: #eef;
            float: left;
        }

        .right {
            float: left;
            max-width: 50%;
            width: 50%;
            background-color: #ccd;
            min-width: 460px;
        }

        table {
            padding: 10px;
        }

        table tr td:first-child {
            text-align: right;
        }

        table tr td:last-child {
            padding-left: 20px;
        }

        table tr {
            height: 50px;
        }

        input, textarea {
            border-radius: 5px;
            padding: 10px;
        }

        .in {
            border: 1px solid #0055FF;
        }

        .button {
            border-radius: 5px;
            background: #EA051A;
            border: 1px solid #EA051A;
            color: white;
        }

        .button1 {
            border-radius: 5px;
            padding: 5px;
            background: #4661ea;
            color: white;
        }

        .progress_container {
            padding: 10px;
            background-color: white;
            border-radius: 5px;
        }

        .progress {
            position: relative;
            border: 1px solid #ddd;
            padding: 1px;
            border-radius: 3px;
        }

        .bar {
            background-color: #B4F5B4;
            width: 0%;
            height: 20px;
            border-radius: 3px;
        }

        .percent {
            position: absolute;
            display: inline-block;
            top: 0px;
            left: 48%;
        }

    </style>

    <script>
        $(function () {
            $(".right").css("min-height", $(".left").css("height"));
        });
    </script>
</head>

<body style="background-color: #C7EDCC">
<h2 style="text-align: center;padding: 10px">文件上传实例</h2>
<div style="margin: 0 auto;">
    <div class="left">
        <form id="uploadFrom" th:action="@{/file/upload}" method="post"
              enctype="multipart/form-data">
            <table>
                <tr>
                    <td>选择文件:</td>
                    <td><input type="file" name="file"/></td>
                </tr>
                <tr>
                    <td>版本号:</td>
                    <td><input type="type" name="version" value="1.0" class="in"/></td>
                </tr>
                <tr>
                    <td>版本code:</td>
                    <td><input type="type" name="code" value="1" class="in"/></td>
                </tr>
                <tr>
                    <td>更新端:</td>
                    <td><input type="radio" name="type" value="A" checked="checked"/>Android
                        <input type="radio" name="type" value="I"/>IOS
                    </td>
                </tr>
                <tr>
                    <td>支持最小版本号:</td>
                    <td><input type="type" name="minVersion" value="1.0" class="in"/></td>
                </tr>
                <tr>
                    <td>更新说明:</td>
                    <td><textarea name="note" class="in" rows="5" cols="40"></textarea></td>
                </tr>
                <tr>
                    <td>是否强制更新:</td>
                    <td><input type="radio" name="ismust" value="Y" checked="checked"/> 是
                        <input type="radio" name="ismust" value="N"/> 否
                    </td>
                </tr>
                <tr>
                    <td>提交:</td>
                    <td>
                        <input type="submit" value="提交文件" class="button"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div class="right">
        <div style="padding: 10px;">
            <div style="padding: 10px;">提交状态</div>
            <div class="progress_container">
                <div class="progress">
                    <div class="bar"></div>
                    <div class="percent">0%</div>
                </div>
                <div style="text-align: center;margin-top: 10px;color: #999999">
                    size: <span class="total">0</span> &nbsp;&nbsp;&nbsp;&nbsp;
                    position: <span class="position">0</span>
                </div>
            </div>
            <div style="padding: 10px;">提交结果</div>
            <div style="background-color: white;widht:100%;word-wrap: break-word"
                 id="uploadJsonResult"></div>
            <div style="padding: 10px;"><a class="button1" href="/file/list" th:href="@{/file/list}">goto history
                list</a></div>
        </div>
    </div>
</div>
<script th:inline="javascript">

    // $(function () {
    //     var bar = $('.bar');
    //     var percent = $('.percent');
    //     $("#uploadAjax").click(function () {
    //         var formData = new FormData($("#uploadFrom")[0]);
    //         console.log(formData);
    //         $.ajax({
    //             type: "post",
    //             url: /*[[@{/file/upload/json}]]*/"/file/upload/json",
    //             data: formData,
    //             async: false,
    //             cache: false,
    //             contentType: false,
    //             processData: false,
    //             dataType: 'json',
    //             beforeSend: function () {
    //                 var percentVal = '0%';
    //                 bar.width(percentVal)
    //                 percent.html(percentVal);
    //             },
    //             uploadProgress: function (event, position, total, percentComplete) {//上传的过程
    //                 //position 已上传了多少
    //                 //total 总大小
    //                 //已上传的百分数
    //                 var percentVal = percentComplete + '%';
    //                 bar.width(percentVal)
    //                 percent.html(percentVal);
    //                 if (parseFloat(total / 1024 / 1024) < 1) {
    //                     $(".total").text(parseFloat(total / 1024).toFixed(2) + "KB");
    //                     $(".position").text(parseFloat(position / 1024).toFixed(2) + "KB");
    //                 } else {
    //                     $(".total").text(parseFloat(total / 1024 / 1024).toFixed(2) + "MB");
    //                     $(".position").text(parseFloat(position / 1024 / 1024).toFixed(2) + "MB");
    //                 }
    //             },
    //             success: function (data) {
    //                 var percentVal = '100%';
    //                 bar.width(percentVal)
    //                 percent.html(percentVal);
    //                 $("#uploadJsonResult").text(JSON.stringify(data));
    //             },
    //             error: function (data) {
    //                 $("#uploadJsonResult").text(JSON.stringify(err));
    //             }
    //         });
    //     })
    // })
</script>
<script th:inline="javascript">
    $(function () {
        var bar = $('.bar');
        var percent = $('.percent');
        $('form').ajaxForm({
            beforeSerialize: function () {
                //alert("表单数据序列化前执行的操作！");
                //$("#txt2").val("java");//如：改变元素的值
            },
            beforeSubmit: function () {
                //alert("表单提交前的操作");
                var filesize = $("input[type='file']")[0].files[0].size / 1024 / 1024;
                if (filesize > 5000) {
                    alert("文件大小超过限制，最多5000M");
                    return false;
                }
                //if($("#txt1").val()==""){return false;}//如：验证表单数据是否为空
            },
            beforeSend: function () {
                var percentVal = '0%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            uploadProgress: function (event, position, total, percentComplete) {//上传的过程
                //position 已上传了多少
                //total 总大小
                //已上传的百分数
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);
                if (parseFloat(total / 1024 / 1024) < 1) {
                    $(".total").text(parseFloat(total / 1024).toFixed(2) + "KB");
                    $(".position").text(parseFloat(position / 1024).toFixed(2) + "KB");
                } else {
                    $(".total").text(parseFloat(total / 1024 / 1024).toFixed(2) + "MB");
                    $(".position").text(parseFloat(position / 1024 / 1024).toFixed(2) + "MB");
                }

            },
            success: function (data) {//成功
                var percentVal = '100%';
                bar.width(percentVal)
                percent.html(percentVal);
                $("#uploadJsonResult").html(data);
            },
            error: function (err) {//失败
                $("#uploadJsonResult").text(err);
            },
            complete: function (xhr) {//完成
                // $("#uploadJsonResult").text($("#uploadJsonResult").text() + "\n 传输完成。");
            }
        });

    });
</script>
</body>

</html>